<template>
    <div>
        <h1>Simple CRUD</h1>
        <div class="user-container">
            <div class="row" v-for="user in userList" :key="user.id">
                <span>{{ user.id }}</span>
                <span>{{ user.name }}</span>
                <span>{{ user.password }}</span>
                <button @click="editUser(user.id)">edit</button>
                <button @click="deleteUser(user.id)">delete</button>
            </div>
        </div>
        <div class="add_from">
            name: <input type="text" v-model="addInfo.name" placeholder="name">
            password :  <input type="text" v-model="addInfo.password" placeholder="password">
            <button @click="addUser()">add</button>
        </div>
        <button @click="testMethod()">test</button>
    </div>
</template>

<script setup>
import { inject, onMounted, ref } from 'vue'
// import { addUser } from '@/api/modules/user';
import http from '@/api/index.js';
const userList = ref([])

let addInfo =ref({
    name: '',
    password: null  
})

const $axios = inject('$axios')


// methods
const getUsersByName = (name) => {
    // $axios.get('/api/getUsersByName?name=' + name).then(res => {
    //     userList.value = res.data
    //     // console.log(res)
    // })
    http.get('/api/getUsersByName?name=' + name).then(res => {
        userList.value = res.data
        // console.log(res)
    })
}
const getAllUser= ()=>{
    getUsersByName('')
}
const testMethod = ()=>{
    http.get('/api/test').then(res => {
        console.log(res)
    })
    // $axios.get('/api/test').then(res => {
    //     console.log(res)
    // })
}
const addUserRandom = ()=>{
    http.post('/api/addUser?name=agiantii&password=123').then(res => {
        getAllUser()
    })
    // $axios.post('/api/addUser?name=agiantii&password=123').then(res => {
    //     getAllUser()
    // })
}
const addUser = () => {
    var data = JSON.stringify({
        "name": addInfo.value.name,
        "password": addInfo.value.password
    });
    if(addInfo.value.name === "" ||  addInfo.value.password === null){
        alert('name or password is empty generate random')
        return ;
    }
    http.post('/api/addUser', data,{
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(function (response) {
            getAllUser()
        })
        .catch(function (error) {
            console.log(error);
    });
    // $axios.post('/api/addUser', data,{
    //     headers: {
    //         'Content-Type': 'application/json'
    //     }
    // })
    // .then(function (response) {
    //         getAllUser()
    //     })
    //     .catch(function (error) {
    //         console.log(error);
    // });
}
const deleteUser = (id) => {
    console.log(id)
    http.get('/api/deleteUserById?id=' + id)
    .then(res => {
        console.log("delete `id`success")
        getAllUser()
    })
    // $axios.get('/api/deleteUserById?id=' + id)
    // .then(res => {
    //     console.log("delete `id`success")
    //     getAllUser()
    // })
}
onMounted(() => {
    testMethod()
    getUsersByName('')
})


</script>

<style>
.row {
    display: flex;
    height: 20px;
    margin: 10px 0;
    justify-content: space-evenly;
}
</style>